<template>
  <div>
    <el-upload v-if="multiple"
               :action="baseUrl + url"
               list-type="picture-card"
               :on-success="handleSuccess"
               :on-preview="handlePictureCardPreview"
               :on-remove="handleRemove"
               ref="multiUpload"
               :file-list="fileList"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-upload ref="singleUpload" v-else
               :style="avatarStyle"
               class="logo-uploader"
               :action="baseUrl + url"
               :show-file-list="false"
               :on-success="handleSuccess">
      <div @mouseover="showBtn=true" @mouseout="showBtn=false">
        <i @click.stop="removeSingle" v-show="dialogImageUrl && showBtn" class="el-icon-close remove-btn"></i>
        <img v-if="dialogImageUrl" :src="dialogImageUrl" :style="avatarStyle">
        <i v-else class="el-icon-plus logo-uploader-icon" :style="avatarStyle"></i>
      </div>
    </el-upload>
    <v-dialog v-model="show" max-width="500">
      <img width="500px" :src="dialogImageUrl" alt="">
    </v-dialog>
  </div>
</template>

<script>
import {Upload} from 'element-ui';
import config from '../../config'

export default {
  name: "vUpload",
  components: {
    elUpload: Upload
  },
  props: {
    url: {
      type: String
    },
    value: {},
    multiple: {
      type: Boolean,
      default: true
    },
    picWidth: {
      type: Number,
      default: 150
    },
    picHeight: {
      type: Number,
      default: 150
    }
  },
  data() {
    return {
      showBtn: false,
      show: false,
      dialogImageUrl: "",
      baseUrl: config.api,
      avatarStyle: {
        width: this.picWidth + 'px',
        height: this.picHeight + 'px',
        'line-height': this.picHeight + 'px'
      },
      fileList: []
    }
  },
  mounted() {
    if (!this.value || this.value.length <= 0) {
      return;
    }
    if (this.multiple) {
      this.fileList = this.value.map(f => {
        return {response: f, url: f}
      });
    } else {
      this.dialogImageUrl = this.value;
    }
  },
  methods: {
    handleSuccess(resp, file) {
      if (!this.multiple) {
        this.dialogImageUrl = file.response;
        this.$emit("input", file.response)
      } else {
        this.fileList.push(file)
        this.$emit("input", this.fileList.map(f => f.response))
      }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList;
      this.$emit("input", fileList.map(f => f.response))
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.response;
      this.show = true;
    },
    removeSingle() {
      this.dialogImageUrl = "";
      this.$refs.singleUpload.clearFiles();
    }
  },
  watch: {
    value: {
      deep: true,
      handler(val, oldVal) {

        if (this.multiple) {
          this.fileList = val.map(f => {
            return {response: f, url: f}
          });
        } else {
          this.dialogImageUrl = val;
        }
      }
    }
  }
}
</script>

<style scoped>
.logo-uploader {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  float: left;
}

.logo-uploader:hover {
  border-color: #409EFF;
}

.logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}

.remove-btn {
  position: absolute;
  right: 0;
  font-size: 16px;
}

.remove-btn:hover {
  color: #c22;
}
</style>
